<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <!-- <el-menu default-active="1-4-1" class="el-menu-vertical-demo">
          <el-menu-item  @mouseover.native="showIcon(1)" @mouseleave.native = "hideIcon(1)">
            <span slot="title">导航1</span>
            <i v-show="showIcon1" class="el-icon-edit-outline" @click="editNavigation(1)"></i>

          </el-menu-item>
          <el-menu-item @mouseover.native="showIcon(2)" @mouseleave.native = "hideIcon(2)">
            <span slot="title">导航2</span>
            <i v-show="showIcon2" class="el-icon-edit-outline" @click="editNavigation(2)"></i>
          </el-menu-item>
          <el-menu-item @mouseover.native="showIcon(3)" @mouseleave.native = "hideIcon(3)">
            <span slot="title">导航3</span>
            <i v-show="showIcon3" class="el-icon-edit-outline" @click="editNavigation(3)"></i>
          </el-menu-item>
        </el-menu> -->
        <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <el-tab-pane label="用户管理">
      <h3>用户管理</h3>
      <span></span>
      <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-tab-pane>  
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  
</template>

<script>
export default {
      data() {
        return {
          showIcon1: false,
      showIcon2: false,
      showIcon3:false,
      dialogVisible: false,
      editedNavigationName: '',
          tabPosition: 'left',
          activeName: 'second',
          tableData: [{
          img:'',
          name:'',
          price:'',
          count:''
        }, {
          img:'',
          name:'',
          price:'',
          count:''
        }, {
          img:'',
          name:'',
          price:'',
          count:''
        }, {
          img:'',
          name:'',
          price:'',
          count:''
        }]
        };
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        showIcon(index) {
      if (index === 1) {
        this.showIcon1 = true;
      } else if (index === 2) {
        this.showIcon2 = true;
      }else if(index === 3){
        this.showIcon3 = true;
      }
    },
    hideIcon(index) {
      if (index === 1) {
        this.showIcon1 = false;
      } else if (index === 2) {
        this.showIcon2 = false;
      }else if(index === 3){
        this.showIcon3 = false;
      }
    },
    editNavigation(index) {
      this.dialogVisible = true;
      // 根据index来确定要编辑的导航
      // 可以从数据源中获取导航的名称，并将其赋值给editedNavigationName
      if (index === 1) {
        this.editedNavigationName = '导航1';
      } else if (index === 2) {
        this.editedNavigationName = '导航2';
      }
    },
    saveNavigationName() {
      // 在这里处理保存导航名称的逻辑
      // 可以将editedNavigationName的值发送到服务器进行保存
      this.dialogVisible = false;
    }
      }
    };
  
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 700px;
  }
</style>